<el-table-column prop="status" label="状态" width="120" align="center">
  <template slot-scope="scope">
    <el-tag :type="getStatusType(scope.row.status)" :color="scope.row.status === 'pending' ? '#9C27B0' : ''">
      {{ getStatusText(scope.row.status) }}
    </el-tag>
  </template>
</el-table-column>

getStatusType(status) {
  const statusMap = {
    'normal': 'success',
    'pending': 'warning',
    'danger': 'danger'
  }
  return statusMap[status] || 'info'
},
getStatusText(status) {
  const statusMap = {
    'normal': '正常',
    'pending': '库存预警',
    'danger': '库存不足'
  }
  return statusMap[status] || status
},

<div class="header-operations">
  <el-select v-model="queryParams.status" placeholder="请选择状态" clearable>
    <el-option
      v-for="item in statusOptions"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" @click="handleSearch">搜索</el-button>
</div>

data() {
  return {
    queryParams: {
      status: '', // 默认值为空
      pageNum: 1,
      pageSize: 10
    },
    statusOptions: [
      { value: 'normal', label: '正常' },
      { value: 'pending', label: '库存预警' },
      { value: 'danger', label: '库存不足' }
    ],
  }
},

handleSearch() {
  this.queryParams.pageNum = 1; // 重置页码
  this.fetchData(); // 刷新数据
}, 